<template>
  <div id="index">
    <a-carousel style="padding: 20px" autoplay>
      <a-image
        :preview="false"
        height="250px"
        width="100%"
        src="https://th.bing.com/th/id/R.b0ea268fa1be279d112489ce83ad4696?rik=qItsh%2fBiy33hlg&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303215009.jpg&ehk=S6PLWamt%2bMzQV8uO9ugcU5d5M19BpXtCpNz2cRJ7q9M%3d&risl=&pid=ImgRaw&r=0"
      ></a-image>
      <a-image
        :preview="false"
        height="250px"
        width="100%"
        src="https://th.bing.com/th/id/OIP.x30y_Gf9n2CWSun7Sv4GUwHaEo?rs=1&pid=ImgDetMain"
      ></a-image>
      <a-image
        :preview="false"
        height="250px"
        width="100%"
        src="https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg"
      ></a-image>
      <a-image
        :preview="false"
        height="250px"
        width="100%"
        src="https://th.bing.com/th/id/R.9de53f9726576696b318a8d95c0946cb?rik=sWB3V9KSxHbThw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f95%2f9995_1.jpg&ehk=GcPUjJED69TBvg9XxQr2klzDzfRsQWhAfLKlIAUWHJQ%3d&risl=&pid=ImgRaw&r=0"
      ></a-image>
    </a-carousel>
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 4 }"
      :data-source="tableData"
      :pagination="pagination"
    >
      <template #renderItem="{ item }">
        <a-list-item @click="onClickItem(item)">
          <a-card hoverable>
            <a-card-meta :title="item.name" :description="item.description">
              <template #avatar>
                <a-avatar :src="item.logo" />
              </template>
              <template #actions>
                ssss
                <setting-outlined key="setting" />
              </template>
            </a-card-meta>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { onBeforeMount, reactive, ref } from "vue";
import { toolVOByPage } from "@/api/tool";
import { message } from "ant-design-vue";
import PictureUploader from "@/components/PictureUploader.vue";

const tableData = ref([]);

// 搜索参数定义
interface queryParamsBody {
  name: string;
  status: number;
  current: number;
  pageSize: number;
}

// 搜索参数
const queryParams = reactive<queryParamsBody>({
  name: "",
  status: 1,
  current: 0,
  pageSize: 16,
});

//生命周期
onBeforeMount(() => {
  //获取数据
  getData();
});

const getData = async () => {
  toolVOByPage(queryParams)
    .then((res: any) => {
      if (res.code == 0) {
        tableData.value = res.data.records;
        pagination.total = res.data.total;
      } else {
        message.error("获取数据失败");
      }
    })
    .catch((err: any) => {
      message.error("系统错误，" + err.message);
    });
};

// 分页配置类型定义
interface PaginationProps {
  current: number;
  pageSize: number;
  total: number;
  showSizeChanger?: boolean;
  pageSizeOptions?: number[];
  showQuickJumper?: boolean;
  showTotal?: (total: number, range: [number, number]) => string;
  onChange?: object;
}

// 监听分页变化
const onPaginationChange = (page: number, pageSize: number) => {
  //更新分页参数
  pagination.current = page;
  pagination.pageSize = pageSize;
  //更新查询参数
  queryParams.current = page;
  queryParams.pageSize = pageSize;
  //获取数据
  getData();
};

// 分页配置
const pagination = reactive<PaginationProps>({
  current: 1, // 当前页数
  pageSize: 16, // 每页条数
  total: 0, // 数据总数，用于计算总页数
  showSizeChanger: false, // 是否显示每页显示个数选择器
  pageSizeOptions: [16, 32, 48, 54], // 每页显示个数选择器的选项设置
  showQuickJumper: false, // 是否显示快速跳转按钮
  showTotal: (total: number) => `共 ${total} 条数据`, // 自定义显示总数
  onChange: onPaginationChange, // 页码改变时的回调函数
});

const onClickItem = (item: any) => {
  router.push(`/toolInfoPage/${item.id}`);
};
</script>

<style scoped>
:deep(.slick-slide) {
  height: 250px;
  overflow: hidden;
  line-height: 250px;
  text-align: center;
  background: #364d79;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
